<template>
  <div class="home-page">
    <!-- 动态背景 -->
    <canvas ref="backgroundCanvas" class="background-canvas"></canvas>
    
    <!-- 浮动粒子 -->
    <div class="floating-particles">
      <div class="particle" v-for="n in 25" :key="'particle-' + n"></div>
    </div>
    
    <!-- 几何图形动画 -->
    <div class="geometric-shapes">
      <div class="geometric-shape shape-1"></div>
      <div class="geometric-shape shape-2"></div>
      <div class="geometric-shape shape-3"></div>
      <div class="geometric-shape shape-4"></div>
      <div class="geometric-shape shape-5"></div>
    </div>
    
    <!-- 光束扫描 -->
    <div class="laser-beams">
      <div class="laser-beam beam-1"></div>
      <div class="laser-beam beam-2"></div>
      <div class="laser-beam beam-3"></div>
    </div>

    <!-- 导航头部 -->
    <nav class="navbar">
      <div class="container">
        <div class="nav-content">
          <div class="logo">
            <div class="logo-icon">🎨</div>
            <h1 class="logo-text">涂色大厅</h1>
          </div>
          <!-- 中间导航按钮 -->
          <div class="nav-buttons">
            <router-link to="/" class="nav-btn" :class="{ active: $route.path === '/' }">
              <div class="nav-icon">🏠</div>
              <span class="nav-text">首页</span>
              <div class="nav-indicator"></div>
            </router-link>
            <router-link to="/lobby" class="nav-btn" :class="{ active: $route.path === '/lobby' }">
              <div class="nav-icon">👥</div>
              <span class="nav-text">房间</span>
              <div class="nav-indicator"></div>
            </router-link>
            <router-link to="/ranking" class="nav-btn" :class="{ active: $route.path === '/ranking' }">
              <div class="nav-icon">🏆</div>
              <span class="nav-text">排行榜</span>
              <div class="nav-indicator"></div>
            </router-link>
          </div>

          <div class="user-info">
            <template v-if="isAuthenticated">
              <div class="user-avatar-wrapper">
                <img :src="getAvatarUrl(userInfo.avatarUrl)" class="avatar" />
                <div class="avatar-glow"></div>
              </div>
              <span class="username">{{ userInfo.username }}</span>
              <router-link to="/profile" class="settings-btn">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2"/>
                  <path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="currentColor" stroke-width="2"/>
                </svg>
              </router-link>
            </template>
            <template v-else>
              <router-link to="/auth/login" class="auth-btn login-btn">登录</router-link>
              <router-link to="/auth/register" class="auth-btn register-btn">注册</router-link>
            </template>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <div class="container">
        <!-- 游戏介绍区域 -->
        <section class="hero-section">
          <div class="hero-content">
            <h2 class="hero-title">欢迎来到涂色抢地盘</h2>
            <p class="hero-description">
              一个充满创意和策略的多人在线游戏，与朋友一起涂色竞技，争夺最大的领土！
            </p>
            <router-link to="/lobby" class="cta-button">
              <div class="button-content">
                <span class="button-icon">🚀</span>
                <span class="button-text">开始游戏</span>
              </div>
              <div class="button-glow"></div>
            </router-link>
          </div>
          <div class="hero-visual">
            <div class="orbit-rings">
              <div class="orbit orbit-1">
                <div class="orbit-dot"></div>
              </div>
              <div class="orbit orbit-2">
                <div class="orbit-dot"></div>
              </div>
              <div class="orbit orbit-3">
                <div class="orbit-dot"></div>
              </div>
            </div>
            <div class="center-logo">🎨</div>
          </div>
        </section>

        <!-- 游戏特色展示 -->
        <section class="features-section">
          <h3 class="section-title">游戏特色</h3>
          <div class="features-grid">
            <div class="feature-card" @click="goToLobby">
              <div class="feature-background"></div>
              <div class="feature-icon">🎯</div>
              <h4 class="feature-title">策略涂色</h4>
              <p class="feature-description">运用策略智慧，在画布上涂色扩张你的领土，与其他玩家争夺最大面积</p>
              <div class="feature-arrow">→</div>
            </div>
            <div class="feature-card" @click="goToLobby">
              <div class="feature-background"></div>
              <div class="feature-icon">👥</div>
              <h4 class="feature-title">多人竞技</h4>
              <p class="feature-description">支持多人同时在线游戏，与朋友或全球玩家实时对战，体验紧张刺激的竞技</p>
              <div class="feature-arrow">→</div>
            </div>
            <div class="feature-card" @click="goToRanking">
              <div class="feature-background"></div>
              <div class="feature-icon">🏆</div>
              <h4 class="feature-title">排行榜系统</h4>
              <p class="feature-description">完善的积分排行榜，记录你的每一次胜利，向全服第一的宝座发起冲击</p>
              <div class="feature-arrow">→</div>
            </div>
            <div class="feature-card" @click="goToLobby">
              <div class="feature-background"></div>
              <div class="feature-icon">⚡</div>
              <h4 class="feature-title">实时对战</h4>
              <p class="feature-description">基于WebSocket的实时通信，确保游戏过程流畅无延迟</p>
              <div class="feature-arrow">→</div>
            </div>
            <div class="feature-card" @click="goToProfile">
              <div class="feature-background"></div>
              <div class="feature-icon">📊</div>
              <h4 class="feature-title">数据统计</h4>
              <p class="feature-description">详细的个人游戏数据统计，包括胜率、场次、最高成绩等</p>
              <div class="feature-arrow">→</div>
            </div>
            <div class="feature-card" @click="goToLobby">
              <div class="feature-background"></div>
              <div class="feature-icon">🎨</div>
              <h4 class="feature-title">自定义房间</h4>
              <p class="feature-description">创建属于你的游戏房间，邀请好友一起享受涂色的乐趣</p>
              <div class="feature-arrow">→</div>
            </div>
          </div>
        </section>

        <!-- 游戏规则说明 -->
        <section class="rules-section">
          <h3 class="section-title">游戏规则</h3>
          <div class="rules-content">
            <div class="rule-card">
              <div class="rule-number">1</div>
              <div class="rule-text">
                <h4>涂色扩张</h4>
                <p>在游戏画布上点击涂色，扩大你的领土范围</p>
              </div>
              <div class="rule-glow"></div>
            </div>
            <div class="rule-card">
              <div class="rule-number">2</div>
              <div class="rule-text">
                <h4>策略竞争</h4>
                <p>与其他玩家争夺领土，阻止对手扩张，保护自己的区域</p>
              </div>
              <div class="rule-glow"></div>
            </div>
            <div class="rule-card">
              <div class="rule-number">3</div>
              <div class="rule-text">
                <h4>胜利条件</h4>
                <p>游戏结束时，占领面积最大的玩家获得胜利</p>
              </div>
              <div class="rule-glow"></div>
            </div>
            <div class="rule-card">
              <div class="rule-number">4</div>
              <div class="rule-text">
                <h4>积分系统</h4>
                <p>第一名6分，第二名4分，第三名2分，最后一名扣1分</p>
              </div>
              <div class="rule-glow"></div>
            </div>
          </div>
        </section>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <p>&copy; 2025 涂色抢地盘游戏. 保留所有权利.</p>
      </div>
    </footer>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user.js'
// 静态导入所有头像
import avatar1 from '/images/avatar1.png'
import avatar2 from '/images/avatar2.png'
import avatar3 from '/images/avatar3.png'
import avatar4 from '/images/avatar4.png'
import avatar5 from '/images/avatar5.png'
import avatar6 from '/images/avatar6.png'

const router = useRouter()
const userStore = useUserStore()
const { userInfo, isAuthenticated } = userStore

// 背景canvas引用
const backgroundCanvas = ref(null)
let animationId = null
let particles = []

// 头像映射
const avatarMap = {
  '1': avatar1,
  '2': avatar2,
  '3': avatar3,
  '4': avatar4,
  '5': avatar5,
  '6': avatar6
}

// 获取头像URL的方法
const getAvatarUrl = (avatarUrl) => {
  // 如果没有avatarUrl或为空，使用默认头像
  const avatarNumber = avatarUrl || '1'
  return avatarMap[avatarNumber] || avatar1
}

// 初始化动态背景
const initDynamicBackground = () => {
  const canvas = backgroundCanvas.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  
  // 设置canvas尺寸
  const resizeCanvas = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }
  
  resizeCanvas()
  window.addEventListener('resize', resizeCanvas)
  
  // 初始化粒子
  const initParticles = () => {
    particles = []
    const particleCount = Math.min(100, Math.floor((canvas.width * canvas.height) / 15000))
    
    for (let i = 0; i < particleCount; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        size: Math.random() * 3 + 1,
        speedX: (Math.random() - 0.5) * 0.8,
        speedY: (Math.random() - 0.5) * 0.8,
        opacity: Math.random() * 0.6 + 0.2,
        hue: Math.random() * 60 + 200, // 蓝紫色调
        life: Math.random() * 300 + 200
      })
    }
  }
  
  // 绘制连接线
  const drawConnections = () => {
    ctx.strokeStyle = 'rgba(59, 130, 246, 0.1)'
    ctx.lineWidth = 1
    
    for (let i = 0; i < particles.length; i++) {
      for (let j = i + 1; j < particles.length; j++) {
        const dx = particles[i].x - particles[j].x
        const dy = particles[i].y - particles[j].y
        const distance = Math.sqrt(dx * dx + dy * dy)
        
        if (distance < 120) {
          const opacity = (120 - distance) / 120 * 0.2
          ctx.strokeStyle = `rgba(59, 130, 246, ${opacity})`
          ctx.beginPath()
          ctx.moveTo(particles[i].x, particles[i].y)
          ctx.lineTo(particles[j].x, particles[j].y)
          ctx.stroke()
        }
      }
    }
  }
  
  // 绘制网格
  const drawGrid = () => {
    const gridSize = 50
    ctx.strokeStyle = 'rgba(59, 130, 246, 0.05)'
    ctx.lineWidth = 1
    
    // 垂直线
    for (let x = 0; x <= canvas.width; x += gridSize) {
      ctx.beginPath()
      ctx.moveTo(x, 0)
      ctx.lineTo(x, canvas.height)
      ctx.stroke()
    }
    
    // 水平线
    for (let y = 0; y <= canvas.height; y += gridSize) {
      ctx.beginPath()
      ctx.moveTo(0, y)
      ctx.lineTo(canvas.width, y)
      ctx.stroke()
    }
  }
  
  // 绘制波浪
  const drawWaves = (time) => {
    const waveHeight = 30
    const waveFrequency = 0.01
    
    ctx.strokeStyle = 'rgba(16, 185, 129, 0.2)'
    ctx.lineWidth = 2
    
    // 第一层波浪
    ctx.beginPath()
    for (let x = 0; x <= canvas.width; x += 2) {
      const y = canvas.height * 0.8 + Math.sin(x * waveFrequency + time * 0.002) * waveHeight
      if (x === 0) {
        ctx.moveTo(x, y)
      } else {
        ctx.lineTo(x, y)
      }
    }
    ctx.stroke()
    
    // 第二层波浪
    ctx.strokeStyle = 'rgba(139, 92, 246, 0.15)'
    ctx.beginPath()
    for (let x = 0; x <= canvas.width; x += 2) {
      const y = canvas.height * 0.7 + Math.sin(x * waveFrequency * 1.5 + time * 0.003) * (waveHeight * 0.7)
      if (x === 0) {
        ctx.moveTo(x, y)
      } else {
        ctx.lineTo(x, y)
      }
    }
    ctx.stroke()
  }
  
  // 动画循环
  const animate = (currentTime) => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    
    // 绘制网格背景
    drawGrid()
    
    // 绘制波浪
    drawWaves(currentTime)
    
    // 更新和绘制粒子
    for (let i = particles.length - 1; i >= 0; i--) {
      const particle = particles[i]
      
      // 更新位置
      particle.x += particle.speedX
      particle.y += particle.speedY
      
      // 边界反弹
      if (particle.x <= 0 || particle.x >= canvas.width) {
        particle.speedX *= -1
        particle.x = Math.max(0, Math.min(canvas.width, particle.x))
      }
      if (particle.y <= 0 || particle.y >= canvas.height) {
        particle.speedY *= -1
        particle.y = Math.max(0, Math.min(canvas.height, particle.y))
      }
      
      // 更新生命值
      particle.life--
      if (particle.life <= 0) {
        particles[i] = {
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          size: Math.random() * 3 + 1,
          speedX: (Math.random() - 0.5) * 0.8,
          speedY: (Math.random() - 0.5) * 0.8,
          opacity: Math.random() * 0.6 + 0.2,
          hue: Math.random() * 60 + 200,
          life: Math.random() * 300 + 200
        }
      }
      
      // 绘制粒子
      const gradient = ctx.createRadialGradient(
        particle.x, particle.y, 0,
        particle.x, particle.y, particle.size * 2
      )
      gradient.addColorStop(0, `hsla(${particle.hue}, 70%, 60%, ${particle.opacity})`)
      gradient.addColorStop(1, `hsla(${particle.hue}, 70%, 60%, 0)`)
      
      ctx.fillStyle = gradient
      ctx.beginPath()
      ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
      ctx.fill()
    }
    
    // 绘制连接线
    drawConnections()
    
    animationId = requestAnimationFrame(animate)
  }
  
  initParticles()
  animationId = requestAnimationFrame(animate)
}

const goToLobby = () => {
  router.push('/lobby')
}

const goToRanking = () => {
  router.push('/ranking')
}

const goToProfile = () => {
  router.push('/profile')
}

onMounted(() => {
  // 延迟初始化背景动画，确保DOM完全渲染
  setTimeout(() => {
    initDynamicBackground()
  }, 100)
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  window.removeEventListener('resize', () => {})
})

console.log('用户头像编号:', userInfo.avatarUrl);
console.log('头像URL:', getAvatarUrl(userInfo.avatarUrl));

</script>

<style scoped>
/* ================ 全局容器样式 ================ */
.home-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #1e3a8a 75%, #0f172a 100%);
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* ================ 动态背景系统 ================ */
.background-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.floating-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.8) 0%, transparent 70%);
  border-radius: 50%;
  animation: homeParticleFloat 12s infinite linear;
}

.particle:nth-child(odd) {
  animation-duration: 18s;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.6) 0%, transparent 70%);
}

.particle:nth-child(3n) {
  animation-duration: 22s;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.7) 0%, transparent 70%);
}

@keyframes homeParticleFloat {
  0% {
    transform: translateY(100vh) translateX(-50px) rotate(0deg) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) translateX(0px) rotate(36deg) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(10vh) translateX(50px) rotate(324deg) scale(1);
  }
  100% {
    transform: translateY(-10vh) translateX(0px) rotate(360deg) scale(0);
    opacity: 0;
  }
}

.geometric-shapes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.geometric-shape {
  position: absolute;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  animation: geometricFloat 20s infinite ease-in-out;
}

.shape-1 {
  width: 100px;
  height: 100px;
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.shape-2 {
  width: 80px;
  height: 80px;
  top: 70%;
  right: 10%;
  animation-delay: -5s;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
}

.shape-3 {
  width: 60px;
  height: 60px;
  top: 30%;
  right: 20%;
  animation-delay: -10s;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
}

.shape-4 {
  width: 90px;
  height: 90px;
  bottom: 20%;
  left: 15%;
  animation-delay: -15s;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
}

.shape-5 {
  width: 70px;
  height: 70px;
  top: 50%;
  left: 50%;
  animation-delay: -7s;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
}

@keyframes geometricFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-30px) rotate(90deg) scale(1.1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(20px) rotate(180deg) scale(0.9);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-15px) rotate(270deg) scale(1.05);
    opacity: 0.7;
  }
}

.laser-beams {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.laser-beam {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
  opacity: 0.5;
}

.beam-1 {
  width: 300%;
  height: 2px;
  top: 25%;
  left: -100%;
  transform: rotate(10deg);
  animation: laserSweep1 16s infinite ease-in-out;
}

.beam-2 {
  width: 250%;
  height: 1px;
  top: 55%;
  left: -75%;
  transform: rotate(-8deg);
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.25), transparent);
  animation: laserSweep2 20s infinite ease-in-out;
}

.beam-3 {
  width: 200%;
  height: 1px;
  top: 75%;
  left: -50%;
  transform: rotate(5deg);
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.2), transparent);
  animation: laserSweep3 24s infinite ease-in-out;
}

@keyframes laserSweep1 {
  0%, 100% { transform: translateX(-150%) rotate(10deg); opacity: 0; }
  50% { transform: translateX(150%) rotate(10deg); opacity: 0.5; }
}

@keyframes laserSweep2 {
  0%, 100% { transform: translateX(-120%) rotate(-8deg); opacity: 0; }
  50% { transform: translateX(120%) rotate(-8deg); opacity: 0.7; }
}

@keyframes laserSweep3 {
  0%, 100% { transform: translateX(-100%) rotate(5deg); opacity: 0; }
  50% { transform: translateX(100%) rotate(5deg); opacity: 0.4; }
}

/* ================ 导航栏样式 ================ */
.navbar {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-icon {
  font-size: 2rem;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
  animation: logoGlow 3s infinite ease-in-out;
}

@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5)); }
  50% { filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.8)); }
}

.logo-text {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, #fff 0%, #e0e7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.nav-buttons {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  padding: 0.75rem 1.5rem;
  border-radius: 16px;
  transition: all 0.3s ease;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.nav-btn.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
  border-color: rgba(59, 130, 246, 0.5);
  color: #fff;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
}

.nav-indicator {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-btn.active .nav-indicator {
  width: 100%;
}

.nav-icon {
  font-size: 1.4rem;
  margin-bottom: 0.25rem;
}

.nav-text {
  font-size: 0.9rem;
  font-weight: 600;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-avatar-wrapper {
  position: relative;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(59, 130, 246, 0.5);
  transition: all 0.3s ease;
}

.avatar-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4, #3b82f6);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  animation: avatarRotate 3s linear infinite;
}

.user-avatar-wrapper:hover .avatar-glow {
  opacity: 0.6;
}

@keyframes avatarRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.username {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

.settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: rotate(90deg);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.settings-btn svg {
  width: 20px;
  height: 20px;
}

.auth-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.login-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.login-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.register-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  color: #fff;
}

.register-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

/* ================ 主内容区域 ================ */
.main-content {
  flex: 1;
  padding: 2rem 0;
  position: relative;
  z-index: 10;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ================ 英雄区域 ================ */
.hero-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 4rem 0;
  margin-bottom: 4rem;
}

.hero-content {
  text-align: left;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, #e0e7ff 50%, #c7d2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 1.5rem 0;
  line-height: 1.2;
  animation: heroTitleGlow 4s infinite ease-in-out;
}

@keyframes heroTitleGlow {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.3)); }
  50% { filter: drop-shadow(0 0 40px rgba(59, 130, 246, 0.6)); }
}

.hero-description {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0 0 2.5rem 0;
  max-width: 500px;
}

.cta-button {
  position: relative;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border: none;
  border-radius: 20px;
  padding: 1rem 2.5rem;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
  text-decoration: none;
  display: inline-block;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
}

.button-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  z-index: 2;
}

.button-icon {
  font-size: 1.2rem;
  animation: iconPulse 2s infinite ease-in-out;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.button-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4, #3b82f6);
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: buttonGlowRotate 3s linear infinite;
  z-index: 1;
}

.cta-button:hover .button-glow {
  opacity: 0.6;
}

@keyframes buttonGlowRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hero-visual {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbit-rings {
  position: relative;
  width: 300px;
  height: 300px;
}

.orbit {
  position: absolute;
  border: 2px solid transparent;
  border-radius: 50%;
  border-top-color: rgba(59, 130, 246, 0.4);
  border-right-color: rgba(59, 130, 246, 0.2);
}

.orbit-1 {
  width: 100%;
  height: 100%;
  animation: orbitRotate 20s linear infinite;
}

.orbit-2 {
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  border-top-color: rgba(16, 185, 129, 0.4);
  border-right-color: rgba(16, 185, 129, 0.2);
  animation: orbitRotate 15s linear infinite reverse;
}

.orbit-3 {
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  border-top-color: rgba(139, 92, 246, 0.4);
  border-right-color: rgba(139, 92, 246, 0.2);
  animation: orbitRotate 10s linear infinite;
}

@keyframes orbitRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.orbit-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.8) 0%, transparent 70%);
  border-radius: 50%;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}

.center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.6));
  animation: centerPulse 3s infinite ease-in-out;
}

@keyframes centerPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}

/* ================ 功能特色区域 ================ */
.features-section {
  margin-bottom: 5rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  margin: 0 0 3rem 0;
  background: linear-gradient(135deg, #fff 0%, #e0e7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.feature-card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-10px);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.feature-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover .feature-background {
  opacity: 1;
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  display: block;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}

.feature-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 1rem 0;
  position: relative;
  z-index: 2;
}

.feature-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
  position: relative;
  z-index: 2;
}

.feature-arrow {
  position: absolute;
  bottom: 1.5rem;
  right: 2rem;
  color: rgba(59, 130, 246, 0.6);
  font-size: 1.2rem;
  font-weight: bold;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  z-index: 2;
}

.feature-card:hover .feature-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ================ 游戏规则区域 ================ */
.rules-section {
  margin-bottom: 4rem;
}

.rules-content {
  display: grid;
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.rule-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.3s ease;
  overflow: hidden;
}

.rule-card:hover {
  transform: translateX(10px);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.rule-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.rule-card:hover .rule-glow {
  opacity: 1;
}

.rule-number {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}

.rule-text {
  position: relative;
  z-index: 2;
}

.rule-text h4 {
  margin: 0 0 0.5rem 0;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
}

.rule-text p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0;
}

/* ================ 页脚 ================ */
.footer {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem 0;
  text-align: center;
  margin-top: auto;
  position: relative;
  z-index: 10;
}

.footer p {
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-size: 0.9rem;
}

/* ================ 响应式设计 ================ */
@media (max-width: 1024px) {
  .container {
    padding: 0 1.5rem;
  }
  
  .hero-section {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  
  .hero-title {
    font-size: 2.8rem;
  }
  
  .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .nav-content {
    padding: 0 1rem;
  }
  
  .nav-buttons {
    gap: 1rem;
  }
  
  .nav-btn {
    padding: 0.5rem 1rem;
  }
  
  .nav-text {
    display: none;
  }
  
  .hero-title {
    font-size: 2.2rem;
  }
  
  .hero-description {
    font-size: 1rem;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .rule-card {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }
  
  .logo-text {
    font-size: 1.4rem;
  }
  
  .username {
    display: none;
  }
  
  .hero-title {
    font-size: 1.8rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .feature-card {
    padding: 1.5rem;
  }
  
  .rule-card {
    padding: 1.5rem;
  }
}

/* ================ 深色模式增强 ================ */
@media (prefers-color-scheme: dark) {
  .home-page {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #1e3a8a 75%, #0f172a 100%);
  }
}

/* ================ 减少动画偏好 ================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================ 高对比度模式 ================ */
@media (prefers-contrast: high) {
  .home-page {
    background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
  }
  
  .feature-card,
  .rule-card {
    border-color: rgba(255, 255, 255, 0.3);
  }
  
  .nav-btn,
  .auth-btn {
    border-color: rgba(255, 255, 255, 0.4);
  }
}

/* ================ 滚动条样式 ================ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}

/* ================ 选择文本样式 ================ */
::selection {
  background: rgba(59, 130, 246, 0.3);
  color: #fff;
}

::-moz-selection {
  background: rgba(59, 130, 246, 0.3);
  color: #fff;
}

/* ================ 焦点可见性 ================ */
.nav-btn:focus-visible,
.cta-button:focus-visible,
.feature-card:focus-visible,
.auth-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
</style>
